<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  
  
  <title>Hexo</title>
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <meta name="description" content="第十八章BootStrap1. 概念： 一个前端开发的框架，Bootstrap，来自 Twitter，是目前很受欢迎的前端框架。Bootstrap 是基于 HTML、CSS、JavaScript 的，它简洁灵活，使得 Web 开发更加快捷。  框架：一个半成品软件，开发人员可以在框架基础上，再进行开发，简化编码。    好处：   定义了很多的css样式和js插件。我们开发人员直接可以使用这些样式">
<meta property="og:type" content="article">
<meta property="og:title" content="Hexo">
<meta property="og:url" content="https://goofyer.gitee.io/notes-on-computer-expertise/2021/12/20/Java/%E7%AC%AC%E5%8D%81%E5%85%AB%E7%AB%A0BootStrap/index.html">
<meta property="og:site_name" content="Hexo">
<meta property="og:description" content="第十八章BootStrap1. 概念： 一个前端开发的框架，Bootstrap，来自 Twitter，是目前很受欢迎的前端框架。Bootstrap 是基于 HTML、CSS、JavaScript 的，它简洁灵活，使得 Web 开发更加快捷。  框架：一个半成品软件，开发人员可以在框架基础上，再进行开发，简化编码。    好处：   定义了很多的css样式和js插件。我们开发人员直接可以使用这些样式">
<meta property="og:locale" content="en_US">
<meta property="og:image" content="https://goofyer.gitee.io/notes-on-computer-expertise/2021/12/20/Java/%E7%AC%AC%E5%8D%81%E5%85%AB%E7%AB%A0BootStrap/...">
<meta property="og:image" content="https://goofyer.gitee.io/notes-on-computer-expertise/2021/12/20/Java/%E7%AC%AC%E5%8D%81%E5%85%AB%E7%AB%A0BootStrap/...">
<meta property="og:image" content="https://goofyer.gitee.io/notes-on-computer-expertise/2021/12/20/Java/%E7%AC%AC%E5%8D%81%E5%85%AB%E7%AB%A0BootStrap/...">
<meta property="og:image" content="https://goofyer.gitee.io/notes-on-computer-expertise/2021/12/20/Java/%E7%AC%AC%E5%8D%81%E5%85%AB%E7%AB%A0BootStrap/img/top_banner.jpg">
<meta property="og:image" content="https://goofyer.gitee.io/notes-on-computer-expertise/2021/12/20/Java/%E7%AC%AC%E5%8D%81%E5%85%AB%E7%AB%A0BootStrap/img/logo.jpg">
<meta property="og:image" content="https://goofyer.gitee.io/notes-on-computer-expertise/2021/12/20/Java/%E7%AC%AC%E5%8D%81%E5%85%AB%E7%AB%A0BootStrap/img/hotel_tel.png">
<meta property="og:image" content="https://goofyer.gitee.io/notes-on-computer-expertise/2021/12/20/Java/%E7%AC%AC%E5%8D%81%E5%85%AB%E7%AB%A0BootStrap/img/banner_1.jpg">
<meta property="og:image" content="https://goofyer.gitee.io/notes-on-computer-expertise/2021/12/20/Java/%E7%AC%AC%E5%8D%81%E5%85%AB%E7%AB%A0BootStrap/img/banner_2.jpg">
<meta property="og:image" content="https://goofyer.gitee.io/notes-on-computer-expertise/2021/12/20/Java/%E7%AC%AC%E5%8D%81%E5%85%AB%E7%AB%A0BootStrap/img/banner_3.jpg">
<meta property="og:image" content="https://goofyer.gitee.io/notes-on-computer-expertise/2021/12/20/Java/%E7%AC%AC%E5%8D%81%E5%85%AB%E7%AB%A0BootStrap/img/icon_5.jpg">
<meta property="og:image" content="https://goofyer.gitee.io/notes-on-computer-expertise/2021/12/20/Java/%E7%AC%AC%E5%8D%81%E5%85%AB%E7%AB%A0BootStrap/img/jiangxuan_3.jpg">
<meta property="og:image" content="https://goofyer.gitee.io/notes-on-computer-expertise/2021/12/20/Java/%E7%AC%AC%E5%8D%81%E5%85%AB%E7%AB%A0BootStrap/img/jiangxuan_3.jpg">
<meta property="og:image" content="https://goofyer.gitee.io/notes-on-computer-expertise/2021/12/20/Java/%E7%AC%AC%E5%8D%81%E5%85%AB%E7%AB%A0BootStrap/img/jiangxuan_3.jpg">
<meta property="og:image" content="https://goofyer.gitee.io/notes-on-computer-expertise/2021/12/20/Java/%E7%AC%AC%E5%8D%81%E5%85%AB%E7%AB%A0BootStrap/img/jiangxuan_3.jpg">
<meta property="og:image" content="https://goofyer.gitee.io/notes-on-computer-expertise/2021/12/20/Java/%E7%AC%AC%E5%8D%81%E5%85%AB%E7%AB%A0BootStrap/img/icon_6.jpg">
<meta property="og:image" content="https://goofyer.gitee.io/notes-on-computer-expertise/2021/12/20/Java/%E7%AC%AC%E5%8D%81%E5%85%AB%E7%AB%A0BootStrap/img/guonei_1.jpg">
<meta property="og:image" content="https://goofyer.gitee.io/notes-on-computer-expertise/2021/12/20/Java/%E7%AC%AC%E5%8D%81%E5%85%AB%E7%AB%A0BootStrap/img/jiangxuan_3.jpg">
<meta property="og:image" content="https://goofyer.gitee.io/notes-on-computer-expertise/2021/12/20/Java/%E7%AC%AC%E5%8D%81%E5%85%AB%E7%AB%A0BootStrap/img/jiangxuan_3.jpg">
<meta property="og:image" content="https://goofyer.gitee.io/notes-on-computer-expertise/2021/12/20/Java/%E7%AC%AC%E5%8D%81%E5%85%AB%E7%AB%A0BootStrap/img/jiangxuan_3.jpg">
<meta property="og:image" content="https://goofyer.gitee.io/notes-on-computer-expertise/2021/12/20/Java/%E7%AC%AC%E5%8D%81%E5%85%AB%E7%AB%A0BootStrap/img/jiangxuan_3.jpg">
<meta property="og:image" content="https://goofyer.gitee.io/notes-on-computer-expertise/2021/12/20/Java/%E7%AC%AC%E5%8D%81%E5%85%AB%E7%AB%A0BootStrap/img/jiangxuan_3.jpg">
<meta property="og:image" content="https://goofyer.gitee.io/notes-on-computer-expertise/2021/12/20/Java/%E7%AC%AC%E5%8D%81%E5%85%AB%E7%AB%A0BootStrap/img/jiangxuan_3.jpg">
<meta property="og:image" content="https://goofyer.gitee.io/notes-on-computer-expertise/2021/12/20/Java/%E7%AC%AC%E5%8D%81%E5%85%AB%E7%AB%A0BootStrap/img/footer_service.png">
<meta property="article:published_time" content="2021-12-19T17:35:17.470Z">
<meta property="article:modified_time" content="2021-12-19T17:35:18.450Z">
<meta property="article:author" content="John Doe">
<meta name="twitter:card" content="summary">
<meta name="twitter:image" content="https://goofyer.gitee.io/notes-on-computer-expertise/2021/12/20/Java/%E7%AC%AC%E5%8D%81%E5%85%AB%E7%AB%A0BootStrap/...">
  
    <link rel="alternate" href="/notes-on-computer-expertise/atom.xml" title="Hexo" type="application/atom+xml">
  
  
    <link rel="shortcut icon" href="/notes-on-computer-expertise/favicon.png">
  
  
    
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/typeface-source-code-pro@0.0.71/index.min.css">

  
  
<link rel="stylesheet" href="/notes-on-computer-expertise/css/style.css">

  
    
<link rel="stylesheet" href="/notes-on-computer-expertise/fancybox/jquery.fancybox.min.css">

  
<meta name="generator" content="Hexo 5.4.0"></head>

<body>
  <div id="container">
    <div id="wrap">
      <header id="header">
  <div id="banner"></div>
  <div id="header-outer" class="outer">
    <div id="header-title" class="inner">
      <h1 id="logo-wrap">
        <a href="/notes-on-computer-expertise/" id="logo">Hexo</a>
      </h1>
      
    </div>
    <div id="header-inner" class="inner">
      <nav id="main-nav">
        <a id="main-nav-toggle" class="nav-icon"></a>
        
          <a class="main-nav-link" href="/notes-on-computer-expertise/">Home</a>
        
          <a class="main-nav-link" href="/notes-on-computer-expertise/archives">Archives</a>
        
      </nav>
      <nav id="sub-nav">
        
          <a id="nav-rss-link" class="nav-icon" href="/notes-on-computer-expertise/atom.xml" title="RSS Feed"></a>
        
        <a id="nav-search-btn" class="nav-icon" title="Search"></a>
      </nav>
      <div id="search-form-wrap">
        <form action="//google.com/search" method="get" accept-charset="UTF-8" class="search-form"><input type="search" name="q" class="search-form-input" placeholder="Search"><button type="submit" class="search-form-submit">&#xF002;</button><input type="hidden" name="sitesearch" value="https://goofyer.gitee.io/notes-on-computer-expertise"></form>
      </div>
    </div>
  </div>
</header>

      <div class="outer">
        <section id="main"><article id="post-Java/第十八章BootStrap" class="h-entry article article-type-post" itemprop="blogPost" itemscope itemtype="https://schema.org/BlogPosting">
  <div class="article-meta">
    <a href="/notes-on-computer-expertise/2021/12/20/Java/%E7%AC%AC%E5%8D%81%E5%85%AB%E7%AB%A0BootStrap/" class="article-date">
  <time class="dt-published" datetime="2021-12-19T17:35:17.470Z" itemprop="datePublished">2021-12-20</time>
</a>
    
  </div>
  <div class="article-inner">
    
    
    <div class="e-content article-entry" itemprop="articleBody">
      
        <h2 id="第十八章BootStrap"><a href="#第十八章BootStrap" class="headerlink" title="第十八章BootStrap"></a>第十八章BootStrap</h2><h3 id="1-概念：-一个前端开发的框架，Bootstrap，来自-Twitter，是目前很受欢迎的前端框架。Bootstrap-是基于-HTML、CSS、JavaScript-的，它简洁灵活，使得-Web-开发更加快捷。"><a href="#1-概念：-一个前端开发的框架，Bootstrap，来自-Twitter，是目前很受欢迎的前端框架。Bootstrap-是基于-HTML、CSS、JavaScript-的，它简洁灵活，使得-Web-开发更加快捷。" class="headerlink" title="1. 概念： 一个前端开发的框架，Bootstrap，来自 Twitter，是目前很受欢迎的前端框架。Bootstrap 是基于 HTML、CSS、JavaScript 的，它简洁灵活，使得 Web 开发更加快捷。"></a>1. 概念： 一个前端开发的框架，Bootstrap，来自 Twitter，是目前很受欢迎的前端框架。Bootstrap 是基于 HTML、CSS、JavaScript 的，它简洁灵活，使得 Web 开发更加快捷。</h3><ul>
<li><ul>
<li>框架：一个半成品软件，开发人员可以在框架基础上，再进行开发，简化编码。</li>
</ul>
</li>
<li><ul>
<li><p>好处：</p>
<ul>
<li><ol>
<li>定义了很多的css样式和js插件。我们开发人员直接可以使用这些样式和插件得到丰富的页面效果。</li>
</ol>
</li>
<li><ol>
<li><p>响应式布局</p>
<ul>
<li><ul>
<li>同一套页面可以兼容不同分辨率的设备。</li>
</ul>
</li>
</ul>
</li>
</ol>
</li>
</ul>
</li>
</ul>
</li>
<li><p>把基础性的知识封装（让开发更简单）—&gt; 提供jar包 —&gt; 开发人员可以借助jar包快速地开发程序。—&gt; 框架，一个半成品软件。</p>
</li>
<li><p>Bootstrap 模板</p>
<ul>
<li><p>&lt;!DOCTYPE html&gt;</p>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
<title>Bootstrap 101 Template</title>

<!-- Bootstrap -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" rel="stylesheet">

<!-- HTML5 shim 和 Respond.js 是为了让 IE8 支持 HTML5 元素和媒体查询（media queries）功能 -->
<!-- 警告：通过 file:// 协议（就是直接将 html 页面拖拽到浏览器中）访问页面时 Respond.js 不起作用 -->
<!--[if lt IE 9]>
<script src="https://cdn.jsdelivr.net/npm/html5shiv@3.7.3/dist/html5shiv.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/respond.js@1.4.2/dest/respond.min.js"></script>
<![endif]-->
</head>
<body>
<h1>你好，世界！</h1>

<!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边) -->
<script src="https://cdn.jsdelivr.net/npm/jquery@1.12.4/dist/jquery.min.js"></script>
<!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script>
</body>
</html>

</li>
</ul>
</li>
</ul>
<h3 id="02-Bootstrap-栅格系统"><a href="#02-Bootstrap-栅格系统" class="headerlink" title="02 Bootstrap_栅格系统"></a>02 Bootstrap_栅格系统</h3><ul>
<li><p>响应式布局</p>
<ul>
<li><ul>
<li>同一套页面可以兼容不同分辨率的设备。</li>
</ul>
</li>
</ul>
</li>
<li><ul>
<li>实现：依赖于栅格系统：将一行平均分成12个格子，可以指定元素占几个格子。</li>
</ul>
</li>
<li><ul>
<li><p>步骤：</p>
<ul>
<li><ol>
<li><p>定义容器。相当于之前的table。</p>
<ul>
<li><ul>
<li><p>容器分类：</p>
<ul>
<li><ol>
<li>container：两边留白</li>
</ol>
</li>
<li><ol>
<li>container-fluid：每一种设备都是100%宽度</li>
</ol>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ol>
</li>
<li><ol>
<li>定义行。相当于之前的tr，样式：row</li>
</ol>
</li>
<li><ol>
<li><p>定义元素。指定该元素在不同的设备上，所占的格子数目。样式：col-设备代号-格子数目</p>
<ul>
<li><ul>
<li><p>设备代号：</p>
<ul>
<li><ol>
<li>xs：超小屏幕 手机 (&lt;768px)：col-xs-12</li>
</ol>
</li>
<li><ol>
<li>sm：小屏幕 平板 (≥768px)</li>
</ol>
</li>
<li><ol>
<li>md：中等屏幕 桌面显示器 (≥992px)</li>
</ol>
</li>
<li><ol>
<li>lg：大屏幕 大桌面显示器 (≥1200px)</li>
</ol>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ol>
</li>
</ul>
</li>
</ul>
</li>
</ul>
<h3 id="03-Bootstrap-全局CSS样式"><a href="#03-Bootstrap-全局CSS样式" class="headerlink" title="03 Bootstrap_全局CSS样式"></a>03 Bootstrap_全局CSS样式</h3><ul>
<li><ol>
<li><p>全局CSS样式：</p>
<ul>
<li><ul>
<li>按钮：class=”btn btn-default”</li>
</ul>
</li>
<li><ul>
<li><p>图片：</p>
<ul>
<li><ul>
<li>class=”img-responsive”：图片在任意尺寸都占100%（响应式）</li>
</ul>
</li>
<li><ul>
<li><p>图片形状</p>
<ul>
<li><ul>
<li><img src="..." alt="..." class="img-rounded"> ：方形</li>
</ul>
</li>
<li><ul>
<li><img src="..." alt="..." class="img-circle">  ：圆形</li>
</ul>
</li>
<li><ul>
<li><img src="..." alt="..." class="img-thumbnail"> ：相框</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
<li><ul>
<li><p>表格</p>
<ul>
<li><ul>
<li>table</li>
</ul>
</li>
<li><ul>
<li>table-bordered：表格边框</li>
</ul>
</li>
<li><ul>
<li>table-hover：表格悬浮变色</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
<li><ul>
<li><p>表单</p>
<ul>
<li><ul>
<li>给表单项添加：class=”form-control” </li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ol>
</li>
<li><ol>
<li><p>组件：</p>
<ul>
<li><ul>
<li>导航条</li>
</ul>
</li>
<li><ul>
<li>分页条</li>
</ul>
</li>
</ul>
</li>
</ol>
</li>
<li><ol>
<li><p>插件：</p>
<ul>
<li><ul>
<li>轮播图</li>
</ul>
</li>
</ul>
</li>
</ol>
</li>
</ul>
<h3 id="04-Bootstrap-组件和插件"><a href="#04-Bootstrap-组件和插件" class="headerlink" title="04 Bootstrap_组件和插件"></a>04 Bootstrap_组件和插件</h3><ul>
<li>导航条</li>
<li><p>&lt;!DOCTYPE html&gt;<br><html lang="zh-CN"><br>  <head></p>
<pre><code>  &lt;meta charset=&quot;utf-8&quot;&gt;
  &lt;meta http-equiv=&quot;X-UA-Compatible&quot; content=&quot;IE=edge&quot;&gt;
  &lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1&quot;&gt;
  &lt;!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ --&gt;
  &lt;title&gt;Bootstrap HelloWorld&lt;/title&gt;

  &lt;!-- Bootstrap --&gt;
  &lt;link href=&quot;css/bootstrap.min.css&quot; rel=&quot;stylesheet&quot;&gt;

  &lt;!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边) --&gt;
  &lt;script src=&quot;js/jquery-3.2.1.min.js&quot;&gt;&lt;/script&gt;
  &lt;!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 --&gt;
  &lt;script src=&quot;js/bootstrap.min.js&quot;&gt;&lt;/script&gt;
</code></pre><p>  &lt;/head&gt;</p>
  <body>
      <nav class="navbar navbar-inverse">
          <div class="container-fluid">
              <!-- Brand and toggle get grouped for better mobile display -->
              <div class="navbar-header">
                  <!-- 定义汉堡按钮 -->
                  <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1"
                   aria-expanded="false">
                      <span class="sr-only">Toggle navigation</span>
                      <span class="icon-bar"></span>
                      <span class="icon-bar"></span>
                      <span class="icon-bar"></span>
                  </button>
                  <a class="navbar-brand" href="#">首页</a>
              </div>

              <!-- Collect the nav links, forms, and other content for toggling -->
              <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
                  <ul class="nav navbar-nav">
                      <li class="active"><a href="#">Link <span class="sr-only">(current)</span></a></li>
                      <li><a href="#">Link</a></li>
                      <li class="dropdown">
                          <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown
                              <span class="caret"></span></a>
                          <ul class="dropdown-menu">
                              <li><a href="#">Action</a></li>
                              <li><a href="#">Another action</a></li>
                              <li><a href="#">Something else here</a></li>
                              <li role="separator" class="divider"></li>
                              <li><a href="#">Separated link</a></li>
                              <li role="separator" class="divider"></li>
                              <li><a href="#">One more separated link</a></li>
                          </ul>
                      </li>
                  </ul>
                  <ul class="nav navbar-nav navbar-right">
                      <li><a href="#">Link</a></li>
                      <li class="dropdown">
                          <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown
                              <span class="caret"></span></a>
                          <ul class="dropdown-menu">
                              <li><a href="#">Action</a></li>
                              <li><a href="#">Another action</a></li>
                              <li><a href="#">Something else here</a></li>
                              <li role="separator" class="divider"></li>
                              <li><a href="#">Separated link</a></li>
                          </ul>
                      </li>
                  </ul>
              </div><!-- /.navbar-collapse -->
          </div><!-- /.container-fluid -->
      </nav>
  </body>

</li>
</ul>
<p>分页条</p>
<p>&lt;!DOCTYPE html&gt;</p>
<p><html lang="zh-CN"><br>    <head><br>        <meta charset="utf-8"><br>        <meta http-equiv="X-UA-Compatible" content="IE=edge"><br>        <meta name="viewport" content="width=device-width, initial-scale=1"><br>        <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ --><br>        <title>Bootstrap HelloWorld</title></p>
<pre><code>    &lt;!-- Bootstrap --&gt;
    &lt;link href=&quot;css/bootstrap.min.css&quot; rel=&quot;stylesheet&quot;&gt;

    &lt;!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边) --&gt;
    &lt;script src=&quot;js/jquery-3.2.1.min.js&quot;&gt;&lt;/script&gt;
    &lt;!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 --&gt;
    &lt;script src=&quot;js/bootstrap.min.js&quot;&gt;&lt;/script&gt;
&lt;/head&gt;
&lt;body&gt;
    &lt;nav aria-label=&quot;Page navigation&quot;&gt;
        &lt;ul class=&quot;pagination&quot;&gt;
            &lt;li class=&quot;disabled&quot;&gt;
                &lt;a href=&quot;#&quot; aria-label=&quot;Previous&quot;&gt;
                    &lt;span aria-hidden=&quot;true&quot;&gt;&amp;laquo;&lt;/span&gt;
                &lt;/a&gt;
            &lt;/li&gt;
            &lt;li&gt;&lt;a href=&quot;#&quot;&gt;1&lt;/a&gt;&lt;/li&gt;
            &lt;li class=&quot;active&quot;&gt;&lt;a href=&quot;#&quot;&gt;2&lt;/a&gt;&lt;/li&gt;
            &lt;li&gt;&lt;a href=&quot;#&quot;&gt;3&lt;/a&gt;&lt;/li&gt;
            &lt;li&gt;&lt;a href=&quot;#&quot;&gt;4&lt;/a&gt;&lt;/li&gt;
            &lt;li&gt;&lt;a href=&quot;#&quot;&gt;5&lt;/a&gt;&lt;/li&gt;
            &lt;li&gt;
                &lt;a href=&quot;#&quot; aria-label=&quot;Next&quot;&gt;
                    &lt;span aria-hidden=&quot;true&quot;&gt;&amp;raquo;&lt;/span&gt;
                &lt;/a&gt;
            &lt;/li&gt;
        &lt;/ul&gt;
    &lt;/nav&gt;
&lt;/body&gt;
</code></pre><p>Bootstrap_插件_轮播图</p>
<p>&lt;!DOCTYPE html&gt;</p>
<p><html lang="zh-CN"><br>    <head><br>        <meta charset="utf-8"><br>        <meta http-equiv="X-UA-Compatible" content="IE=edge"><br>        <meta name="viewport" content="width=device-width, initial-scale=1"><br>        <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ --><br>        <title>Bootstrap HelloWorld</title></p>
<pre><code>    &lt;!-- Bootstrap --&gt;
    &lt;link href=&quot;css/bootstrap.min.css&quot; rel=&quot;stylesheet&quot;&gt;

    &lt;!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边) --&gt;
    &lt;script src=&quot;js/jquery-3.2.1.min.js&quot;&gt;&lt;/script&gt;
    &lt;!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 --&gt;
    &lt;script src=&quot;js/bootstrap.min.js&quot;&gt;&lt;/script&gt;
&lt;/head&gt;
&lt;body&gt;
    &lt;div id=&quot;carousel-example-generic&quot; class=&quot;carousel slide&quot; data-ride=&quot;carousel&quot;&gt;
        &lt;!-- Indicators --&gt;
        &lt;ol class=&quot;carousel-indicators&quot;&gt;
            &lt;li data-target=&quot;#carousel-example-generic&quot; data-slide-to=&quot;0&quot; class=&quot;active&quot;&gt;&lt;/li&gt;
            &lt;li data-target=&quot;#carousel-example-generic&quot; data-slide-to=&quot;1&quot;&gt;&lt;/li&gt;
            &lt;li data-target=&quot;#carousel-example-generic&quot; data-slide-to=&quot;2&quot;&gt;&lt;/li&gt;
        &lt;/ol&gt;

        &lt;!-- Wrapper for slides --&gt;
        &lt;div class=&quot;carousel-inner&quot; role=&quot;listbox&quot;&gt;
            &lt;div class=&quot;item active&quot;&gt;
                &lt;img src=&quot;img/banner_1.jpg&quot; alt=&quot;...&quot;&gt;
            &lt;/div&gt;
            &lt;div class=&quot;item&quot;&gt;
                &lt;img src=&quot;img/banner_2.jpg&quot; alt=&quot;...&quot;&gt;
            &lt;/div&gt;
            &lt;div class=&quot;item&quot;&gt;
                &lt;img src=&quot;img/banner_3.jpg&quot; alt=&quot;...&quot;&gt;
            &lt;/div&gt;
        &lt;/div&gt;

        &lt;!-- Controls --&gt;
        &lt;a class=&quot;left carousel-control&quot; href=&quot;#carousel-example-generic&quot; role=&quot;button&quot; data-slide=&quot;prev&quot;&gt;
            &lt;span class=&quot;glyphicon glyphicon-chevron-left&quot; aria-hidden=&quot;true&quot;&gt;&lt;/span&gt;
            &lt;span class=&quot;sr-only&quot;&gt;Previous&lt;/span&gt;
        &lt;/a&gt;
        &lt;a class=&quot;right carousel-control&quot; href=&quot;#carousel-example-generic&quot; role=&quot;button&quot; data-slide=&quot;next&quot;&gt;
            &lt;span class=&quot;glyphicon glyphicon-chevron-right&quot; aria-hidden=&quot;true&quot;&gt;&lt;/span&gt;
            &lt;span class=&quot;sr-only&quot;&gt;Next&lt;/span&gt;
        &lt;/a&gt;
    &lt;/div&gt;
&lt;/body&gt;
</code></pre><h3 id="5-案例-黑马旅游网"><a href="#5-案例-黑马旅游网" class="headerlink" title="5 案例_黑马旅游网"></a>5 案例_黑马旅游网</h3><ul>
<li>子主题 1</li>
<li>子主题 2</li>
<li>子主题 3</li>
<li>子主题 4</li>
<li>子主题 5</li>
<li>子主题 6</li>
<li>子主题 15</li>
<li>子主题 16</li>
<li>子主题 17</li>
<li>子主题 18</li>
<li>子主题 19</li>
<li>子主题 20</li>
<li>子主题 7</li>
<li>子主题 8</li>
<li>&lt;!DOCTYPE html&gt;<html lang="zh-CN">
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
  <title>Bootstrap HelloWorld</title>
  <!-- Bootstrap -->
  <link href="css/bootstrap.min.css" rel="stylesheet">
  <!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边) -->
  <script src="js/jquery-3.2.1.min.js"></script>
  <!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->
  <script src="js/bootstrap.min.js"></script>
  <style>
      .paddtop {
          padding-top: 10px;
      }
      .search-btn {
          float: left;
          border: 1px solid #ffc900;
          width: 90px;
          height: 35px;
          background-color: #ffc900;
          text-align: center;
          line-height: 35px;
          margin-top: 15px;
      }
      .search-input {
          float: left;
          border: 2px solid #ffc900;
          width: 400px;
          height: 35px;
          padding-left: 5px;
          margin-top: 15px;
      }
      .jx {
          border-bottom: 2px solid #ffc900;
          padding: 5px;
      }
      .company {
          height: 40px;
          background-color: #ffc900;
          text-align: center;
          line-height: 40px;
          font-size: 8px;
      }
  </style>
</head>
<body>
  <!-- 1.页眉部分-->
  <header class="container-fluid">
      <div class="row">
          <img src="img/top_banner.jpg" class="img-responsive">
      </div>
      <div class="row paddtop">
          <div class="col-md-3">
              <img src="img/logo.jpg" class="img-responsive">
          </div>
          <div class="col-md-5">
              <input class="search-input" placeholder="请输入线路名称">
              <a class="search-btn" href="#">搜索</a>
          </div>
          <div class="col-md-4">
              <img src="img/hotel_tel.png" class="img-responsive">
          </div>
      </div>
      <!--导航栏-->
      <div class="row">
          <nav class="navbar navbar-default">
              <div class="container-fluid">
                  <!-- Brand and toggle get grouped for better mobile display -->
                  <div class="navbar-header">
                      <!-- 定义汉堡按钮 -->
                      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse"
                          data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
                          <span class="sr-only">Toggle navigation</span>
                          <span class="icon-bar"></span>
                          <span class="icon-bar"></span>
                          <span class="icon-bar"></span>
                      </button>
                      <a class="navbar-brand" href="#">首页</a>
                  </div>
                  <!-- Collect the nav links, forms, and other content for toggling -->
                  <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
                      <ul class="nav navbar-nav">
                          <li class="active"><a href="#">Link <span class="sr-only">(current)</span></a></li>
                          <li><a href="#">Link</a></li>
                          <li><a href="#">Link</a></li>
                          <li><a href="#">Link</a></li>
                          <li><a href="#">Link</a></li>
                          <li><a href="#">Link</a></li>
                      </ul>
                  </div><!-- /.navbar-collapse -->
              </div><!-- /.container-fluid -->
          </nav>
      </div>
      <!--轮播图-->
      <div class="row">
          <div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
              <!-- Indicators -->
              <ol class="carousel-indicators">
                  <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
                  <li data-target="#carousel-example-generic" data-slide-to="1"></li>
                  <li data-target="#carousel-example-generic" data-slide-to="2"></li>
              </ol>
              <!-- Wrapper for slides -->
              <div class="carousel-inner" role="listbox">
                  <div class="item active">
                      <img src="img/banner_1.jpg" alt="...">
                  </div>
                  <div class="item">
                      <img src="img/banner_2.jpg" alt="...">
                  </div>
                  <div class="item">
                      <img src="img/banner_3.jpg" alt="...">
                  </div>
              </div>
              <!-- Controls -->
              <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
                  <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
                  <span class="sr-only">Previous</span>
              </a>
              <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
                  <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
                  <span class="sr-only">Next</span>
              </a>
          </div>
      </div>
  </header>
  <!-- 2.主体部分-->
  <div class="container">
      <div class="row jx">
          <img src="img/icon_5.jpg">
          <span>黑马精选</span>
      </div>
      <div class="row paddtop">
          <div class="col-md-3">
              <div class="thumbnail">
                  <img src="img/jiangxuan_3.jpg" alt="">
                  <p>上海直飞三亚5天4晚自由行(春节预售+亲子/蜜月/休闲游首选+豪华酒店任选+接送机)</p>
                  <font color="red">&yen; 699</font>
              </div>
          </div>
          <div class="col-md-3">
              <div class="thumbnail">
                  <img src="img/jiangxuan_3.jpg" alt="">
                  <p>上海直飞三亚5天4晚自由行(春节预售+亲子/蜜月/休闲游首选+豪华酒店任选+接送机)</p>
                  <font color="red">&yen; 699</font>
              </div>
          </div>
          <div class="col-md-3">
              <div class="thumbnail">
                  <img src="img/jiangxuan_3.jpg" alt="">
                  <p>上海直飞三亚5天4晚自由行(春节预售+亲子/蜜月/休闲游首选+豪华酒店任选+接送机)</p>
                  <font color="red">&yen; 699</font>
              </div>
          </div>
          <div class="col-md-3">
              <div class="thumbnail">
                  <img src="img/jiangxuan_3.jpg" alt="">
                  <p>上海直飞三亚5天4晚自由行(春节预售+亲子/蜜月/休闲游首选+豪华酒店任选+接送机)</p>
                  <font color="red">&yen; 699</font>
              </div>
          </div>
      </div>
      <div class="row jx">
          <img src="img/icon_6.jpg">
          <span>国内游</span>
      </div>
      <div class="row paddtop">
          <div class="col-md-4">
              <img src="img/guonei_1.jpg">
          </div>
          <div class="col-md-8">
              <div class="row">
                  <div class="col-md-4">
                      <div class="thumbnail">
                          <img src="img/jiangxuan_3.jpg" alt="">
                          <p>上海直飞三亚5天4晚自由行(春节预售+亲子/蜜月/休闲游首选+豪华酒店任选+接送机)</p>
                          <font color="red">&yen; 699</font>
                      </div>
                  </div>
                  <div class="col-md-4">
                      <div class="thumbnail">
                          <img src="img/jiangxuan_3.jpg" alt="">
                          <p>上海直飞三亚5天4晚自由行(春节预售+亲子/蜜月/休闲游首选+豪华酒店任选+接送机)</p>
                          <font color="red">&yen; 699</font>
                      </div>
                  </div>
                  <div class="col-md-4">
                      <div class="thumbnail">
                          <img src="img/jiangxuan_3.jpg" alt="">
                          <p>上海直飞三亚5天4晚自由行(春节预售+亲子/蜜月/休闲游首选+豪华酒店任选+接送机)</p>
                          <font color="red">&yen; 699</font>
                      </div>
                  </div>
              </div>
              <div class="row">
                  <div class="col-md-4">
                      <div class="thumbnail">
                          <img src="img/jiangxuan_3.jpg" alt="">
                          <p>上海直飞三亚5天4晚自由行(春节预售+亲子/蜜月/休闲游首选+豪华酒店任选+接送机)</p>
                          <font color="red">&yen; 699</font>
                      </div>
                  </div>
                  <div class="col-md-4">
                      <div class="thumbnail">
                          <img src="img/jiangxuan_3.jpg" alt="">
                          <p>上海直飞三亚5天4晚自由行(春节预售+亲子/蜜月/休闲游首选+豪华酒店任选+接送机)</p>
                          <font color="red">&yen; 699</font>
                      </div>
                  </div>
                  <div class="col-md-4">
                      <div class="thumbnail">
                          <img src="img/jiangxuan_3.jpg" alt="">
                          <p>上海直飞三亚5天4晚自由行(春节预售+亲子/蜜月/休闲游首选+豪华酒店任选+接送机)</p>
                          <font color="red">&yen; 699</font>
                      </div>
                  </div>
              </div>
          </div>
      </div>
  </div>
  <!-- 3.页脚部分-->
  <footer class="container-fluid">
      <div class="row">
          <img src="img/footer_service.png" class="img-responsive">
      </div>
      <div class="row company">
          江苏传智播客教育科技股份有限公司 版权所有Copyright 2006-2018, All Rights Reserved 苏ICP备16007882
      </div>
  </footer>
</body>
</html></li>
<li>子主题 10</li>
<li>子主题 14</li>
<li>子主题 11</li>
<li>子主题 12</li>
<li>子主题 13</li>
</ul>

      
    </div>
    <footer class="article-footer">
      <a data-url="https://goofyer.gitee.io/notes-on-computer-expertise/2021/12/20/Java/%E7%AC%AC%E5%8D%81%E5%85%AB%E7%AB%A0BootStrap/" data-id="cl403sxrd001wf8vu180y4gqz" data-title="" class="article-share-link">Share</a>
      
      
      
    </footer>
  </div>
  
    
<nav id="article-nav">
  
    <a href="/notes-on-computer-expertise/2021/12/20/Java/%E7%AC%AC%E5%8D%81%E4%B9%9D%E7%AB%A0XML/" id="article-nav-newer" class="article-nav-link-wrap">
      <strong class="article-nav-caption">Newer</strong>
      <div class="article-nav-title">
        
          (no title)
        
      </div>
    </a>
  
  
    <a href="/notes-on-computer-expertise/2021/12/20/Java/%E7%AC%AC%E5%8D%81%E4%B8%83%E7%AB%A0JavaScript/" id="article-nav-older" class="article-nav-link-wrap">
      <strong class="article-nav-caption">Older</strong>
      <div class="article-nav-title"></div>
    </a>
  
</nav>

  
</article>


</section>
        
          <aside id="sidebar">
  
    
  <div class="widget-wrap">
    <h3 class="widget-title">Categories</h3>
    <div class="widget">
      <ul class="category-list"><li class="category-list-item"><a class="category-list-link" href="/notes-on-computer-expertise/categories/C-%E5%B7%A5%E5%85%B7/">C#工具</a></li><li class="category-list-item"><a class="category-list-link" href="/notes-on-computer-expertise/categories/C-%E5%B7%A5%E5%85%B7/">C++工具</a></li><li class="category-list-item"><a class="category-list-link" href="/notes-on-computer-expertise/categories/Mysql/">Mysql</a></li><li class="category-list-item"><a class="category-list-link" href="/notes-on-computer-expertise/categories/blender/">blender</a></li><li class="category-list-item"><a class="category-list-link" href="/notes-on-computer-expertise/categories/linux/">linux</a></li><li class="category-list-item"><a class="category-list-link" href="/notes-on-computer-expertise/categories/manim/">manim</a></li><li class="category-list-item"><a class="category-list-link" href="/notes-on-computer-expertise/categories/spring/">spring</a></li><li class="category-list-item"><a class="category-list-link" href="/notes-on-computer-expertise/categories/vba%E5%9F%BA%E7%A1%80%E6%93%8D%E4%BD%9C/">vba基础操作</a></li><li class="category-list-item"><a class="category-list-link" href="/notes-on-computer-expertise/categories/%E5%88%9B%E9%80%A0%E6%A8%A1%E5%BC%8F/">创造模式</a></li><li class="category-list-item"><a class="category-list-link" href="/notes-on-computer-expertise/categories/%E6%93%8D%E4%BD%9C%E7%B3%BB%E7%BB%9F/">操作系统</a></li><li class="category-list-item"><a class="category-list-link" href="/notes-on-computer-expertise/categories/%E6%93%8D%E4%BD%9C%E7%B3%BB%E7%BB%9F%E5%9F%BA%E7%A1%80%E7%9F%A5%E8%AF%86/">操作系统基础知识</a></li><li class="category-list-item"><a class="category-list-link" href="/notes-on-computer-expertise/categories/%E6%93%8D%E4%BD%9C%E7%B3%BB%E7%BB%9F%E5%BC%80%E5%8F%91/">操作系统开发</a></li><li class="category-list-item"><a class="category-list-link" href="/notes-on-computer-expertise/categories/%E6%95%B0%E5%AD%A6/">数学</a></li><li class="category-list-item"><a class="category-list-link" href="/notes-on-computer-expertise/categories/%E6%95%B0%E6%8D%AE%E7%BB%93%E6%9E%84/">数据结构</a></li><li class="category-list-item"><a class="category-list-link" href="/notes-on-computer-expertise/categories/%E6%95%B0%E6%8D%AE%E7%BB%93%E6%9E%84%E5%9F%BA%E7%A1%80%E7%9F%A5%E8%AF%86/">数据结构基础知识</a></li><li class="category-list-item"><a class="category-list-link" href="/notes-on-computer-expertise/categories/%E6%A8%A1%E6%9D%BF/">模板</a></li><li class="category-list-item"><a class="category-list-link" href="/notes-on-computer-expertise/categories/%E6%B7%B1%E5%BA%A6%E5%AD%A6%E4%B9%A0/">深度学习</a></li><li class="category-list-item"><a class="category-list-link" href="/notes-on-computer-expertise/categories/%E8%8B%B1%E8%AF%AD/">英语</a></li><li class="category-list-item"><a class="category-list-link" href="/notes-on-computer-expertise/categories/%E8%99%9A%E5%B9%BB4/">虚幻4</a></li><li class="category-list-item"><a class="category-list-link" href="/notes-on-computer-expertise/categories/%E8%AE%A1%E7%AE%97%E6%9C%BA%E7%BB%84%E6%88%90%E5%8E%9F%E7%90%86/">计算机组成原理</a></li><li class="category-list-item"><a class="category-list-link" href="/notes-on-computer-expertise/categories/%E8%AE%A1%E7%AE%97%E6%9C%BA%E7%BD%91%E7%BB%9C/">计算机网络</a></li></ul>
    </div>
  </div>


  
    
  <div class="widget-wrap">
    <h3 class="widget-title">Tags</h3>
    <div class="widget">
      <ul class="tag-list" itemprop="keywords"><li class="tag-list-item"><a class="tag-list-link" href="/notes-on-computer-expertise/tags/C/" rel="tag">C++</a></li></ul>
    </div>
  </div>


  
    
  <div class="widget-wrap">
    <h3 class="widget-title">Tag Cloud</h3>
    <div class="widget tagcloud">
      <a href="/notes-on-computer-expertise/tags/C/" style="font-size: 10px;">C++</a>
    </div>
  </div>

  
    
  <div class="widget-wrap">
    <h3 class="widget-title">Archives</h3>
    <div class="widget">
      <ul class="archive-list"><li class="archive-list-item"><a class="archive-list-link" href="/notes-on-computer-expertise/archives/2022/05/">May 2022</a></li><li class="archive-list-item"><a class="archive-list-link" href="/notes-on-computer-expertise/archives/2022/03/">March 2022</a></li><li class="archive-list-item"><a class="archive-list-link" href="/notes-on-computer-expertise/archives/2022/02/">February 2022</a></li><li class="archive-list-item"><a class="archive-list-link" href="/notes-on-computer-expertise/archives/2022/01/">January 2022</a></li><li class="archive-list-item"><a class="archive-list-link" href="/notes-on-computer-expertise/archives/2021/12/">December 2021</a></li></ul>
    </div>
  </div>


  
    
  <div class="widget-wrap">
    <h3 class="widget-title">Recent Posts</h3>
    <div class="widget">
      <ul>
        
          <li>
            <a href="/notes-on-computer-expertise/2022/05/31/vue/%E5%89%8D%E7%AB%AF%E6%A1%86%E6%9E%B6%E9%AA%8C%E8%AF%81%E7%A0%81%E6%97%A0%E6%B3%95%E6%98%BE%E7%A4%BA/">(no title)</a>
          </li>
        
          <li>
            <a href="/notes-on-computer-expertise/2022/05/26/%E6%95%B0%E6%8D%AE%E5%BA%93/navicat%E5%AE%89%E8%A3%85/">(no title)</a>
          </li>
        
          <li>
            <a href="/notes-on-computer-expertise/2022/05/25/%E8%99%9A%E5%B9%BB4%E5%BC%95%E6%93%8E%E5%BC%80%E5%8F%91/%E8%99%9A%E5%B9%BB%E5%9B%9B%20mod%E5%88%B6%E4%BD%9C/">(no title)</a>
          </li>
        
          <li>
            <a href="/notes-on-computer-expertise/2022/05/23/python/python%E6%89%B9%E9%87%8F%E7%94%9F%E6%88%90%E6%95%B0%E6%8D%AE/">(no title)</a>
          </li>
        
          <li>
            <a href="/notes-on-computer-expertise/2022/05/23/vba%E5%9F%BA%E7%A1%80%E6%93%8D%E4%BD%9C%E7%AC%94%E8%AE%B0/EXCEL%E5%9F%BA%E7%A1%80%E6%95%99%E7%A8%8B/">(no title)</a>
          </li>
        
      </ul>
    </div>
  </div>

  
</aside>
        
      </div>
      <footer id="footer">
  
  <div class="outer">
    <div id="footer-info" class="inner">
      
      &copy; 2022 John Doe<br>
      Powered by <a href="https://hexo.io/" target="_blank">Hexo</a>
    </div>
  </div>
</footer>

    </div>
    <nav id="mobile-nav">
  
    <a href="/notes-on-computer-expertise/" class="mobile-nav-link">Home</a>
  
    <a href="/notes-on-computer-expertise/archives" class="mobile-nav-link">Archives</a>
  
</nav>
    


<script src="/notes-on-computer-expertise/js/jquery-3.4.1.min.js"></script>



  
<script src="/notes-on-computer-expertise/fancybox/jquery.fancybox.min.js"></script>




<script src="/notes-on-computer-expertise/js/script.js"></script>





  </div>
<script type="text/x-mathjax-config">
    MathJax.Hub.Config({
        tex2jax: {
            inlineMath: [ ["$","$"], ["\\(","\\)"] ],
            skipTags: ['script', 'noscript', 'style', 'textarea', 'pre', 'code'],
            processEscapes: true
        }
    });
    MathJax.Hub.Queue(function() {
        var all = MathJax.Hub.getAllJax();
        for (var i = 0; i < all.length; ++i)
            all[i].SourceElement().parentNode.className += ' has-jax';
    });
</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.1/MathJax.js?config=TeX-MML-AM_CHTML"></script>
</body>
</html>